// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/themes';
@import 'src/styles/mixins';

.toggle-btn-div {

  display: flex;
  flex-flow: row nowrap;

  .pcs-toggle {
    display: inline-block;

    svg {
      cursor: pointer;
      @include rem-fallback(height, 15px);
      @include rem-fallback(width, 28px);

      &.disabled { cursor: auto; }
    }
  }

  @include themify($themes) {
    .cls-1 { stroke: themed('colorEnableToggleBackground'); }

    .enable-toggle .cls-2,
    .disable-toggle .cls-2 {
      fill: themed('colorToggle');
      stroke: themed('colorToggle');
    }

    .disable-toggle,
    .disabled {
      fill: themed('colorDisableToggleBackground');
    }

    .enable-toggle { fill: themed('colorEnableToggleBackground'); }

    .disabled { stroke: themed('colorDisabledLine'); }
  }
  .input-contents {
    display: flex;
    flex-flow: column nowrap;
    flex-grow: 1;
    @include rem-fallback(margin-left, 10px);

    > .form-group-label {
      @include rem-font-size(14px);
      // If there is div content after the label, adding some padding above it
      + div { @include rem-fallback(margin-top, 12px); }

      @include themify($themes) {
        color: themed('colorContentText');
      }
    }

    > input[type=text],
    > input[type=number],
    > input[type=password],
    > textarea { @include rem-font-size(14px); }
  }
}
